import React, {useEffect, useRef, useState} from 'react';
import {Checkbox, Col, Row, Select} from 'antd';
import LineChartsTrend from "../../components/HighCharts/LineChartsTrend";
import {getAllBatches, getTradesStat} from "@src/services/bookPirceStat";
import styles from './styles.module.less';

const {Option} = Select;

const Trend = () => {
    const [statisticalCenterData, setStatisticalCenterData] = useState([]);
    const [selectedExchange, setSelectedExchange] = useState(null); // 当前选择的交易所
    const [refreshFrequency, setRefreshFrequency] = useState('minute'); // 默认刷新频率为每分钟
    const intervalRef = useRef(null); // 保存定时器引用
    const [allBatches, setAllBatches] = useState([]);
    const [select_batch, setSellBatch] = useState();

    const [selectedData, setSelectedData] = useState([
        'avg_price',
        'total_amount',
    ]);
    useEffect(() => {
        onLoad(); // 初次加载数据

        // 根据刷新频率动态更新数据
        const refreshData = () => {
            if (select_batch === undefined){
                onLoad(); // 发送当前频率到后端
            }
        };

        // 清除之前的定时器
        if (intervalRef.current) clearInterval(intervalRef.current);

        // 设置新的定时器
        const intervalTime = 60000; // 每分钟、每小时、每天对应的时间间隔

        intervalRef.current = setInterval(refreshData, intervalTime);

        return () => clearInterval(intervalRef.current); // 清理定时器
    }, [refreshFrequency]);

    const onLoad = async (batch_id = undefined) => {
        const bookPriceStat = await getTradesStat({batch_id}); // 将频率发送到后端
        if (bookPriceStat) {
            setStatisticalCenterData(bookPriceStat);
        }

        // const allBatchesList = await getAllBatches(); // 将频率发送到后端
        // if (allBatchesList) {
        //     setAllBatches(allBatchesList);
        // }

    };

    const handleBatchChange = (value) => {
        setSellBatch(value)
        onLoad(value);
        // 处理批次变化
    };


    const handleExchangeChange = (value) => {
        setSelectedExchange(value); // 更新选中的交易所
    };

    const handleFrequencyChange = (value) => {
        setRefreshFrequency(value); // 更新刷新频率
        onLoad(value); // 立即请求一次数据
    };
    const handleDataSelectionChange = (checkedValues) => {
        setSelectedData(checkedValues); // 更新选择的数据项
    };
    return (
        <div className={styles.home_box}>
            {/* 选择框区域 */}
            <div style={{marginBottom: '16px', display: 'flex', gap: '16px'}}>
                <Select
                    placeholder="Select Exchange"
                    style={{width: 200}}
                    onChange={handleExchangeChange}
                    allowClear
                >
                    <Option value="all">All</Option>
                    <Option value="binance">Binance</Option>
                    <Option value="okx">OKX</Option>
                    <Option value="cryptocom">Cryptocom</Option>
                    <Option value="bybit">Bybit</Option>
                    <Option value="coinbase">Coinbase</Option>
                    <Option value="kraken">Kraken</Option>
                </Select>
                <Select
                    placeholder="选择批次"
                    style={{width: 200}}
                    onChange={handleBatchChange}
                    value={select_batch}
                    allowClear
                    aria-hidden={true}
                >
                    {allBatches.map((batch, index) => (
                        <Option key={index} value={batch}>
                            {batch}
                        </Option>
                    ))}
                </Select>
                <div style={{marginBottom: '16px'}}>
                    <Checkbox.Group
                        options={[
                            {label: '成交价', value: 'avg_price'},
                            {label: '成交量', value: 'total_amount'},
                        ]}
                        value={selectedData}
                        onChange={handleDataSelectionChange}
                    />
                </div>
            </div>

            {/* 图表展示 */}
            {selectedExchange ? (
                // 全屏显示选中的图表
                <div style={{width: '95vw', height: '100vh', background: '#fff'}}>
                    <LineChartsTrend
                        trendData={statisticalCenterData[selectedExchange]}
                        exchange={selectedExchange}
                        selectedData={selectedData}
                    />
                </div>
            ) : (
                // 正常布局显示所有图表
                <>
                    <Row>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['all']}
                                exchange={selectedExchange}
                                selectedData={selectedData}
                            />
                        </Col>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['all']}
                                exchange={selectedExchange}
                                selectedData={selectedData}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['binance']}
                                exchange="binance"
                                selectedData={selectedData}
                            />
                        </Col>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['binance']}
                                exchange="binance"
                                selectedData={selectedData}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['okx']}
                                exchange="okx"
                                selectedData={selectedData}
                            />
                        </Col>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['okx']}
                                exchange="okx"
                                selectedData={selectedData}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['cryptocom']}
                                exchange="cryptocom"
                                selectedData={selectedData}
                            />
                        </Col>
                        <Col span={12}>
                            <LineChartsTrend
                                trendData={statisticalCenterData['cryptocom']}
                                exchange="cryptocom"
                                selectedData={selectedData}
                            />
                        </Col>
                        {/*<Col span={8}>*/}
                        {/*    <LineChartsTrend*/}
                        {/*        trendData={statisticalCenterData['kraken']}*/}
                        {/*        exchange="kraken"*/}
                        {/*        selectedData={selectedData}*/}
                        {/*    />*/}
                        {/*</Col>*/}
                        {/*<Col span={8}>*/}
                        {/*    <LineChartsTrend*/}
                        {/*        trendData={statisticalCenterData['coinbase']}*/}
                        {/*        exchange="coinbase"*/}
                        {/*        selectedData={selectedData}*/}
                        {/*    />*/}
                        {/*</Col>*/}
                    </Row>
                    {/*<Row>*/}
                    {/*    <Col span={8}>*/}
                    {/*        <LineChartsTrend*/}
                    {/*            trendData={statisticalCenterData['bybit']}*/}
                    {/*            exchange="bybit"*/}
                    {/*            selectedData={selectedData}*/}
                    {/*        />*/}
                    {/*    </Col>*/}
                    {/*</Row>*/}
                </>
            )}
        </div>
    );
};

export default Trend;
